@extends('layouts.default')
@section('main')
<link rel="stylesheet" href="/css/uniform.css" />
<link rel="stylesheet" href="/css/select2.css" />

<script type="text/javascript" src="{{URL::asset('js/')}}/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="{{URL::asset('js/')}}/hightcharts/highcharts.js"></script>
<script src="{{URL::asset('js/My97DatePicker/')}}/WdatePicker.js"></script>

<script>
    //初始函数，设置定时器，定时取数据
    $(function () {
        queryDayRegData();
    });

    //图表属性，不包含数据
    var dayRegOptions = {
        chart: {
            renderTo:'dayRegCon',
            type:'spline'
        },
        title: {
            text: '会员日注册数据统计',
            x: -20 //center
        },
        xAxis:{

        },
        yAxis: {
            title: {
                text: '日注册次数'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        series: [{
            color : "#f7a35c",
            name:'注册'
        }],
        tooltip: {
            crosshairs: [{
                width: 3,
                color: 'green'
            }, {
                width: 3,
                color: 'green'
            }],


            valueSuffix: '次'
        },
        credits:{
            // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
            text:'无界投融',               // 显示的文字
            href:'',   // 链接地址
            position:{                          // 位置设置
                align: 'left',
                x: 1050,
                verticalAlign: 'bottom',
                y: -30
            },
            style: {                            // 样式设置
                cursor: 'pointer',
                color: 'blue',
                fontSize: '10px'
            }
        },
        plotOptions: {
            spline:{
                dataLabels: {
                    enabled: true
                },
                animation:false
            }
        }
    };

    var weekRegOptions = {
        chart: {
            renderTo:'weekRegCon',
            type:'spline'
        },
        title: {
            text: '会员周注册数据统计',
            x: -20 //center
        },
        xAxis:{

        },
        yAxis: {
            title: {
                text: '周注册次数'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        series: [{
            name:'注册'
        }],
        tooltip: {
            valueSuffix: '次'
        },
        credits:{
            // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
            text:'无界投融',               // 显示的文字
            href:'',   // 链接地址
            position:{                          // 位置设置
                align: 'left',
                x: 1050,
                verticalAlign: 'bottom',
                y: -30
            },
            style: {                            // 样式设置
                cursor: 'pointer',
                color: 'blue',
                fontSize: '10px'
            }
        },
        plotOptions: {
            spline:{
                dataLabels: {
                    enabled: true
                },
                animation:false
            }
        }
    };

    var monthRegOptions = {
        chart: {
            renderTo:'monthRegCon',
            type:'spline'
        },
        title: {
            text: '会员月注册数据统计',
            x: -20 //center
        },
        xAxis:{

        },
        yAxis: {
            title: {
                text: '月注册次数'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        series: [{
            color : "#90ed7d",
            name:'注册'
        }],
        tooltip: {
            valueSuffix: '次'
        },
        credits:{
            // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
            text:'无界投融',               // 显示的文字
            href:'',   // 链接地址
            position:{                          // 位置设置
                align: 'left',
                x: 1050,
                verticalAlign: 'bottom',
                y: -30
            },
            style: {                            // 样式设置
                cursor: 'pointer',
                color: 'blue',
                fontSize: '10px'
            }
        },
        plotOptions: {
            spline:{
                dataLabels: {
                    enabled: true
                },
                animation:false
            }
        }
    };

    var dayLogOptions = {
        chart: {
            renderTo:'dayLogCon',
            type:'spline'
        },
        title: {
            text: '会员日登录数据统计',
            x: -20 //center
        },
        xAxis:{

        },
        yAxis: {
            title: {
                text: '日登录次数'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        series: [{
            name:'登录'
        }],
        tooltip: {
            valueSuffix: '次'
        },
        credits:{
            // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
            text:'无界投融',               // 显示的文字
            href:'',   // 链接地址
            position:{                          // 位置设置
                align: 'left',
                x: 1050,
                verticalAlign: 'bottom',
                y: -30
            },
            style: {                            // 样式设置
                cursor: 'pointer',
                color: 'blue',
                fontSize: '10px'
            }
        },
        plotOptions: {
            spline:{
                dataLabels: {
                    enabled: true
                },
                animation:false
            }
        }
    };

    var weekLogOptions = {
        chart: {
            renderTo:'weekLogCon',
            type:'spline'
        },
        title: {
            text: '会员周登录数据统计',
            x: -20 //center
        },
        xAxis:{

        },
        yAxis: {
            title: {
                text: '周登录次数'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        series: [{
            name:'登录'
        }],
        tooltip: {
            valueSuffix: '次'
        },
        credits:{
            // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
            text:'无界投融',               // 显示的文字
            href:'',   // 链接地址
            position:{                          // 位置设置
                align: 'left',
                x: 1050,
                verticalAlign: 'bottom',
                y: -30
            },
            style: {                            // 样式设置
                cursor: 'pointer',
                color: 'blue',
                fontSize: '10px'
            }
        },
        plotOptions: {
            spline:{
                dataLabels: {
                    enabled: true
                },
                animation:false
            }
        }
    };

    var monthLogOptions = {
        chart: {
            renderTo:'monthLogCon',
            type:'spline'
        },
        title: {
            text: '会员月登录数据统计',
            x: -20 //center
        },
        xAxis:{

        },
        yAxis: {
            title: {
                text: '月登录次数'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        series: [{
            name:'登录'
        }],
        tooltip: {
            valueSuffix: '次'
        },
        credits:{
            // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
            text:'无界投融',               // 显示的文字
            href:'',   // 链接地址
            position:{                          // 位置设置
                align: 'left',
                x: 1050,
                verticalAlign: 'bottom',
                y: -30
            },
            style: {                            // 样式设置
                cursor: 'pointer',
                color: 'blue',
                fontSize: '10px'
            }
        },
        plotOptions: {
            spline:{
                dataLabels: {
                    enabled: true
                },
                animation:false
            }
        }
    };


    //性别饼图 属性
    var genderOptions = {
        chart: {
            renderTo:'genderCon',
            type:'pie'
        },
        title: {
            text: '会员性别分布统计'
//            x: -20 //center
        },

        series: [{
            color : "#f7a35c",
            name:'会员性别分布统计'
        }],
//        tooltip: {
//            crosshairs: [{
//                width: 3,
//                color: 'green'
//            }, {
//                width: 3,
//                color: 'green'
//            }],
//
//            valueSuffix: '次'
//        },

//        credits:{
//            // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
//            text:'无界投融',               // 显示的文字
//            href:'',   // 链接地址
//            position:{                          // 位置设置
//                align: 'left',
//                x: 1050,
//                verticalAlign: 'bottom',
//                y: -30
//            },
//            style: {                            // 样式设置
//                cursor: 'pointer',
//                color: 'blue',
//                fontSize: '10px'
//            }
//        },


        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        }

//        series: [{
//            type: 'pie',
//            name: 'Browser share',
//            data: [
//                ['Firefox',   45.0],
//                ['IE',       26.8],
//                {
//                    name: 'Chrome',
//                    y: 12.8,
//                    sliced: true,
//                    selected: true
//                },
//                ['Safari',    8.5],
//                ['Opera',     6.2],
//                ['Others',   0.7]
//            ]
//        }]

    };



    var dayRegCategories = [];
    var dayRegDatas = [];

    var weekRegCategories = [];
    var weekRegDatas = [];

    var monthRegCategories = [];
    var monthRegDatas = [];

    var dayLogCategories = [];
    var dayLogDatas = [];

    var weekLogCategories = [];
    var weekLogDatas = [];

    var monthLogCategories = [];
    var monthLogDatas = [];


    var genderCategories = [];
    var genderDatas = [];

    //Ajax 获取数据并解析创建Highcharts图表
    function queryDayRegData() {
        $.ajax({
            url:'/userstatistic/user-day-reg',
            dataType:"json",
            success:function(data) {
                $.each(data,function(i,n){
                    dayRegCategories[i] = n[0];
                    dayRegDatas[i] = n[1]*1;
                });
                dayRegOptions.xAxis.categories = dayRegCategories;
                dayRegOptions.series[0].data = dayRegDatas;
                chart = new Highcharts.Chart(dayRegOptions);
            }
        });

        $.ajax({
            url:'/userstatistic/user-week-reg',
            dataType:"json",
            success:function(data) {
                $.each(data,function(i,n){
                    weekRegCategories[i] = n[0];
                    weekRegDatas[i] = n[1]*1;
                });
                weekRegOptions.xAxis.categories = weekRegCategories;
                weekRegOptions.series[0].data = weekRegDatas;
                chart = new Highcharts.Chart(weekRegOptions);
            }
        });

        $.ajax({
            url:'/userstatistic/user-month-reg',
            dataType:"json",
            success:function(data) {
                $.each(data,function(i,n){
                    monthRegCategories[i] = n[0];
                    monthRegDatas[i] = n[1]*1;
                });
                monthRegOptions.xAxis.categories = monthRegCategories;
                monthRegOptions.series[0].data = monthRegDatas;
                chart = new Highcharts.Chart(monthRegOptions);
            }
        });

        $.ajax({
            url:'/userstatistic/user-day-log',
            dataType:"json",
            success:function(data) {
                $.each(data,function(i,n){
                    dayLogCategories[i] = n[0];
                    dayLogDatas[i] = n[1]*1;
                });
                dayLogOptions.xAxis.categories = dayLogCategories;
                dayLogOptions.series[0].data = dayLogDatas;
                chart = new Highcharts.Chart(dayLogOptions);
            }
        });

        $.ajax({
            url:'/userstatistic/user-week-log',
            dataType:"json",
            success:function(data) {
                $.each(data,function(i,n){
                    weekLogCategories[i] = n[0];
                    weekLogDatas[i] = n[1]*1;
                });
                weekLogOptions.xAxis.categories = weekLogCategories;
                weekLogOptions.series[0].data = weekLogDatas;
                chart = new Highcharts.Chart(weekLogOptions);
            }
        });

        $.ajax({
            url:'/userstatistic/user-month-log',
            dataType:"json",
            success:function(data) {
                $.each(data,function(i,n){
                    monthLogCategories[i] = n[0];
                    monthLogDatas[i] = n[1]*1;
                });
                monthLogOptions.xAxis.categories = monthLogCategories;
                monthLogOptions.series[0].data = monthLogDatas;
                chart = new Highcharts.Chart(monthLogOptions);
            }
        });


        $.ajax({
            url:'/userstatistic/gender',
            dataType:"json",
            success:function(data) {
                var genderDatas= [];

                $.each(data,function(i,n){
//                    monthLogCategories[i] = n[0];
//                    alert(i)
                    console.log(n);
                    genderDatas.push([i, n*1]);
//                    genderDatas[i] = [i, n[1]];
                });

                console.log(genderDatas);

                genderOptions.series[0].data = genderDatas;
                chart = new Highcharts.Chart(genderOptions);
            }
        });


    }

</script>
<div id="content">
    <div id="content-header">
        <div id="breadcrumb">
            <a href="{{url('home')}}" title="返回首页" class="tip-bottom"><i class="icon-home"></i> 首页</a>
        </div>
    </div>
    <div class="container-fluid">
        <div class="widget-title">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#tab1">注册数</a></li>
                <li><a data-toggle="tab" href="#tab2">登录数</a></li>
                <li><a data-toggle="tab" href="#tab3">数据表</a></li>
                <li><a data-toggle="tab" href="#tab4">性别分布</a></li>
            </ul>
        </div>
        <div class="widget-content tab-content">
            <div id="tab1" class="tab-pane active">
                <div>
                    <p>
                        <button class="btn tip-top" id="dayReg">日</button>
                        <button class="btn tip-left" id="weekReg">周</button>
                        <button class="btn tip-right" id="monthReg">月</button>
                    </p>
                    <div id="dayRegCon" style="width: 1100px; height: 400px; margin: 0 "></div>
                    <div id="weekRegCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                    <div id="monthRegCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                </div>
            </div>
            <div id="tab2" class="tab-pane">
                <p>
                    <button class="btn tip-top" id="dayLog">日</button>
                    <button class="btn tip-left" id="weekLog">周</button>
                    <button class="btn tip-right" id="monthLog">月</button>
                </p>
                <div id="dayLogCon" style="width: 1100px; height: 400px; margin: 0 "></div>
                <div id="weekLogCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                <div id="monthLogCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
            </div>
            <div id="tab3" class="tab-pane">
                {{--<table>--}}
                    {{--<tr>--}}
                        {{--<th>--}}
                            {{--总会员数:--}}
                        {{--</th>--}}
                        {{--<th>--}}
                            {{--{{$total}}--}}
                        {{--</th>--}}
                    {{--</tr>--}}
                {{--</table>--}}

                <form action="{{url('userstatistic/export')}}" method="get" id="adForm">
                    <table>
                        <tr>
                            <th>
                                <label >类型 :</label>
                            </th>
                            <th>
                                <div class="controls">
                                    <select  name="type"  >
                                        <option value="">请选择</option>
                                        <option value="reg">注册</option>
                                    </select>
                                </div>
                            </th>
                            <th>
                                <label >开始时间 :</label>
                            </th>
                            <th>
                                <div class="controls">
                                    <input type="text"  name="begin_time"
                                           placeholder="开始时间" onfocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})" />
                                </div>
                            </th>
                            <th>
                                <label >结束时间 :</label>
                            </th>
                            <th>
                                <div class="controls">
                                    <input type="text"  name="end_time"
                                           placeholder="结束时间" onfocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})" />
                                </div>
                            </th>
                            <th>
                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                <div class="controls">
                                    <button type="button" name="find" class="btn btn-info">查询</button>
                                    <button type="submit" class="btn btn-info">导出</button>
                                </div>
                            </th>
                        </tr>
                    </table>
                </form>
                <div id="result">
                </div>
                <div id="ajaxPage"></div>
            </div>

            <div id="tab4" class="tab-pane">
                <p>
                    <button class="btn tip-top" id="dayLog">日</button>
                    <button class="btn tip-left" id="weekLog">周</button>
                    <button class="btn tip-right" id="monthLog">月</button>
                </p>
                <div id="genderCon" style="width: 1100px; height: 400px; margin: 0 "></div>
                <div id="weekLogCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                <div id="monthLogCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
            </div>

        </div>
    </div>


</div>
<script src="/js/matrix.tables.js"></script>
<script type="text/javascript" src="{{URL::asset('js/')}}/common.js"></script>

<script>
    $("#dayReg").click(function(){
        $("#dayRegCon").show();
        $("#weekRegCon").hide();
        $("#monthRegCon").hide();
    });

    $("#weekReg").click(function(){
        $("#dayRegCon").hide();
        $("#weekRegCon").show();
        $("#monthRegCon").hide();
    });

    $("#monthReg").click(function(){
        $("#dayRegCon").hide();
        $("#weekRegCon").hide();
        $("#monthRegCon").show();
    });

    $("#dayLog").click(function(){
        $("#dayLogCon").show();
        $("#weekLogCon").hide();
        $("#monthLogCon").hide();
    });

    $("#weekLog").click(function(){
        $("#dayLogCon").hide();
        $("#weekLogCon").show();
        $("#monthLogCon").hide();
    });

    $("#monthLog").click(function(){
        $("#dayLogCon").hide();
        $("#weekLogCon").hide();
        $("#monthLogCon").show();
    });

    //异步获取
    $('button[name=find]').click(function(){
        ajaxRequest($('#adForm').serializeArray(),"{{url('userstatistic/find')}}",function(data){
            if(data.status){
                var html='<table class="table table-bordered table-striped">';
                    html+='<thead>';
                    html+='<tr>';
                    html+='<th>uid</th>';
                    html+='<th>昵称</th>';
                    html+='<th>用户名</th>';
                    html+='<th>注册时间</th>';
                    html+='<th>登录数</th>';
                    html+='<th>状态</th>';
                    html+='<th>是否推荐</th>';
                    html+='<th>用户详情</th>';
                    html+='</tr>';
                    html+='</thead>';
                    html+='<tbody>';
                $.each(data.message.list,function(i,e){
                    html+='<tr class="gradeX">';
                    html+='<td>'+e.uid+'</td>';
                    html+='<td>'+e.nickname+'</td>';
                    html+='<td>'+e.username+'</td>';
                    html+='<td>'+e.reg_time+'</td>';
                    html+='<td>'+e.login_count+'</td>';
                    html+='<td>'+e.status+'</td>';
                    html+='<td>'+e.recommend+'</td>';
                    html+='<td><a href="user/info?uid='+e.uid+'">点击查看</a></td>';
                    html+='<tr>';
                })

                $("#ajaxPage").html(data.message.page);
                $("#result").html(html);
            }else{
                alert('没有您要查找的数据');
            }
        });
    });

    /*
     * 异步分页
     */
    $("body").on('click','#ajaxPage li',function(){
        if(!$(this).hasClass('pagemore')){
            var page = $(this).attr('value');
            var params = {};
            params['page'] = page;
            params['begin_time'] = $("input[name='begin_time']").val();
            params['end_time'] = $('input[name=end_time]').val();
            params['type'] = $('select[name=type').val();

            if(page==0){
                return false;
            }
            ajaxRequest(params,'userstatistic/find',function(data){
                if(data.status){
                    var html='<table class="table table-bordered table-striped">';
                    html+='<thead>';
                    html+='<tr>';
                    html+='<th>uid</th>';
                    html+='<th>昵称</th>';
                    html+='<th>用户名</th>';
                    html+='<th>注册时间</th>';
                    html+='<th>登录数</th>';
                    html+='<th>状态</th>';
                    html+='<th>是否推荐</th>';
                    html+='<th>用户详情</th>';
                    html+='</tr>';
                    html+='</thead>';
                    html+='<tbody>';
                    $.each(data.message.list,function(i,e){
                        html+='<tr class="gradeX">';
                        html+='<td>'+e.uid+'</td>';
                        html+='<td>'+e.nickname+'</td>';
                        html+='<td>'+e.username+'</td>';
                        html+='<td>'+e.reg_time+'</td>';
                        html+='<td>'+e.login_count+'</td>';
                        html+='<td>'+e.status+'</td>';
                        html+='<td>'+e.recommend+'</td>';
                        html+='<td><a href="user/info?uid='+e.uid+'">点击查看</a></td>';
                        html+='<tr>';
                    })

                    $("#ajaxPage").html(data.message.page);
                    $("#result").html(html);
                }else{
                    alert('没有您要查找的数据');
                }
            });
        }
    });

    //跳转分页
    $("#ajaxPage").on('click','.ajaxPagegoto',function(){
        var page = $(".page-num").val();
        var params = {};
        params['page'] = page;
        params['begin_time'] = $('input[name=begin_time]').val();
        params['end_time'] = $('input[name=end_time]').val();
        params['type'] = $('select[name=type').val();

        if(page == undefined){
            showMessage("error",'请输入正确的跳转页数');
        }else{
            var lastpage = $("#ajaxPage .lastpage").attr('value');
            if(parseInt(page)>parseInt(lastpage)){
                page = lastpage;
            }
            ajaxRequest(params,'userstatistic/find',function(data){
                if(data.status){
                    var html='<table class="table table-bordered table-striped">';
                    html+='<thead>';
                    html+='<tr>';
                    html+='<th>uid</th>';
                    html+='<th>昵称</th>';
                    html+='<th>用户名</th>';
                    html+='<th>注册时间</th>';
                    html+='<th>登录数</th>';
                    html+='<th>状态</th>';
                    html+='<th>是否推荐</th>';
                    html+='<th>用户详情</th>';
                    html+='</tr>';
                    html+='</thead>';
                    html+='<tbody>';
                    $.each(data.message.list,function(i,e){
                        html+='<tr class="gradeX">';
                        html+='<td>'+e.uid+'</td>';
                        html+='<td>'+e.nickname+'</td>';
                        html+='<td>'+e.username+'</td>';
                        html+='<td>'+e.reg_time+'</td>';
                        html+='<td>'+e.login_count+'</td>';
                        html+='<td>'+e.status+'</td>';
                        html+='<td>'+e.recommend+'</td>';
                        html+='<td><a href="user/info?uid='+e.uid+'">点击查看</a></td>';
                        html+='<tr>';
                    })

                    $("#ajaxPage").html(data.message.page);
                    $("#result").html(html);
                }else{
                    alert('没有您要查找的数据');
                }
            });
        }
    });




</script>

@stop
